<script>
import tabs from '@/components/MyTabs/tabs'

export default {
  name: 'tab',
  props: {
    label: {
      type: String,
      default: 'tab'
    },
    index: {
      type: String,
      default: '1'
    }
  },
  render () {
    const classStyle = {
      tab: true,
      active: this.isActive
    }
    return (
        <li class={classStyle} onClick={this.clickTabHandle}>{this.label}</li>
    )
  },
  computed: {
    isActive () {
      return this.$parent.defaultActiveKey == this.index
    }
  },
  methods: {
    clickTabHandle () {
      this.$parent.updatedefaultActiveKey(this.index)
    }
  },
  mounted () {
    // this.$parent.showContent.push(this.$slots.default)
    this.$parent.showContent.push(this)
  }
}
</script>

<style  scoped>
.tab{
  flex: 1;
  list-style: none;
  line-height: 40px;
  margin-right: 30px;
  position: relative;
  text-align: center;
}

.tab:hover{
  color: orange;
}
.tab.active{
  border-bottom: 2px solid orange;
}
</style>
